<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo sfConfig::get('app_google_api_key') ?>&sensor=false" type="text/javascript"></script>

<div id="map_canvas" style="width:950px; height:500px; margin: 0 auto;"></div>

<div style="display: none;">
    <div id="fancyBoxContent" style="width:500px;height:500px;overflow:auto;">
        <form action="<?php echo url_for('@reserve'); ?>" id="frmReservar">
            <h1>[<span id="contenido-adicional"></span>] Benito's Parking</h1>
            <h3>Av. Desconocida #666 - Lima, Centro</h3>
            <br />
            <table width="60%" align="center">
              <tr>
                  <td align="right">
                      <label for="rb1">Costo por hora/fracción: S/.8.00</label><input type="radio" id="rb1" name="costoTipo" value="8.00" />
                  </td>
              </tr>
              <tr>
                  <td align="right">
                      <label for="rb2">Costo por día: S/.50.00</label><input type="radio" id="rb2" name="costoTipo" value="50.00" />
                  </td>
              </tr>
            </table>
            <br />
            Desde: <input type="text" size="10" value="25/05/2014" /> <input type="text" value="11:30" size="3" /> <select><option value="">a.m.</option><option value="">p.m.</option></select>
            <br />
            Placa: <input type="text" value="XYZ-123" />
            <br /><br /><br /><br />
            <table width="100%" align="center">
                <tr>
                    <td width="50%" align="right">
                        <input type="button" value="Reservar" onclick="grabarReserva();" />
                    </td>
                    <td width="50%" align="left">
                        <input type="button" value="Seguir buscando" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    initialize();
});
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(<?php echo sfConfig::get('app_google_maps_lat'); ?>, <?php echo sfConfig::get('app_google_maps_lng'); ?>),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
<?php foreach($parking_lots as $parking_lot){ ?>
  var myLatlng = new google.maps.LatLng(<?php echo $parking_lot->getGmapsLat(); ?>, <?php echo $parking_lot->getGmapsLng(); ?>);
  var marker = new google.maps.Marker({
    position: myLatlng,
    draggable: false,
    map: map,
    title: "<?php echo $parking_lot->getName(); ?>"
  });
  google.maps.event.addListener(marker, 'click', function() {
    $.fancybox({
        href : '#fancyBoxContent',
        onStart : function(){
            fillFancyboxContentAjax(<?php echo $parking_lot->getId(); ?>);
        }
    });
  });
<?php } ?>
}
function fillFancyboxContentAjax(parking_lot_id){
    $.ajax({
        type: "post",
        url: "<?php echo url_for('@showFancyboxContent_ajax'); ?>",
        data: {
            parking_lot_id : parking_lot_id
        },
        success: function(html){
            $("#fancyBoxContent").html(html);
        }
    });
}
</script>